<template>
  <div ref="oWrap" class="t-avatar-wrap">
    <Component
      v-show="mappingProps.visible"
      ref="refComponent"
      class="t-avatar"
      v-bind="{ ...attrs, ...{class: null, style: null, id: null}, ...mappingProps, ...{ square: squareComputed, size: sizeComputed } }"
      @click="onClickHandler"
    >
      <template v-slot:default>
        <slot name="default">
          <template v-if="mappingProps.srcType">
            <template v-if="mappingProps.srcType === 'img'">
              <img v-if="mappingProps.src" :src="mappingProps.src" />
              <template v-else>
                <Icon
                  v-if="
                    mappingProps.placeholderType === 'icon' &&
                    mappingProps.iconPlaceholder
                  "
                  :name="mappingProps.iconPlaceholder"
                ></Icon>
                <span
                  v-else-if="
                    mappingProps.placeholderType === 'text' && mappingProps.text
                  "
                  v-text="mappingProps.text.slice(-1)"
                ></span>
              </template>
            </template>
            <template v-else-if="mappingProps.srcType === 'icon'">
              <Icon
                v-if="mappingProps.iconName"
                :name="mappingProps.iconName"
              ></Icon>
              <template v-else>
                <Icon
                  v-if="
                    mappingProps.placeholderType === 'icon' &&
                    mappingProps.iconPlaceholder
                  "
                  :name="mappingProps.iconPlaceholder"
                ></Icon>
                <span
                  v-else-if="
                    mappingProps.placeholderType === 'text' && mappingProps.text
                  "
                  v-text="mappingProps.text.slice(-1)"
                ></span>
              </template>
            </template>
          </template>
        </slot>

        <div
          v-if="!!slots.decorator"
          class="q-avatar-decorator t-avatar-decorator"
        >
          <div
            class="q-avatar-decorator-container t-avatar-decorator-container"
          >
            <slot name="decorator"></slot>
          </div>
        </div>
        <div v-if="!!slots.hover" class="q-avatar-hover t-avatar-hover">
          <div class="q-avatar-hover-container t-avatar-hover-container">
            <slot name="hover"></slot>
          </div>
        </div>
      </template>
    </Component>
    <!-- v-show="inDesign"  不加运行时也不会展示出来, 没问题 -->
    <div ref="dragBar" class="resize-bar" :class="squareComputed ? 'square' : ''" @mousedown="onDragToChangeImg"></div>
  </div>
</template>

<script setup>
import Component from '@teld/q-components/Avatar';
import Icon from '@teld/q-components/Icon';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps } from 't/common/utils';
import { computed, ref, useAttrs, useSlots } from 'vue';
const refComponent = ref();
const slots = useSlots();
const attrs = useAttrs();
const props = defineProps({
  ...commonProps,
  ...Component.props,
  fontSize: {
    type: String,
    default() {
      return '66.67%';
    },
  },
  square: [Boolean, String],
  // 新加的自定义属性 sizeLevel -- 有 sizeLevel 有值, 优先取他, 否则取 size
  // 硬编码时 使用此组件, 不需要此属性, 所以 default 在此处为‘’, 在元数据中为 32px
  sizeLevel: {
    type: String,
    default() {
      return ''; // 元数据设置的默认大小 32px
    },
  },
  color: {
    type: String,
    default() {
      return ''; // 元数据设置的默认颜色 #1976D2
    },
  },
  // textColor 已包含
  // 图片类型
  srcType: {
    type: String,
    default() {
      return 'img'; // img, icon (第一个 也为元数据默认值)
    },
  },
  // 占位内容类型
  placeholderType: {
    type: String,
    default() {
      return 'icon'; // icon, text (第一个为元数据默认值)
    },
  },
  // src 图片地址
  src: {
    type: String,
    default() {
      return '';
    },
  },
  // iconName 图标
  iconName: {
    type: String,
    default() {
      return '';
    },
  },
  // iconPlaceholder 占位图标
  iconPlaceholder: {
    type: String,
    default() {
      return '';
    },
  },
  // text 占位文本
  text: {
    type: String,
    default() {
      return '';
    },
  },
  // 低代码传入的是 tabIndex，而非 tabindex, 就是为了覆盖前者
  tabIndex: {
    type: [String, Number],
    default() {
      return 0;
    },
  },
});
const [mappingProps, mappingExpose] = useMappingProps(props);
defineExpose(mappingExpose);
const squareComputed = computed(() => {
  return (mappingProps.square === '1' || mappingProps.square === true) ? true : false;
})
const sizeComputed = computed(() => {
  return mappingProps.sizeLevel || mappingProps.size || '32px';
})
const oWrap = ref();
const dragBar = ref();
const inDesign = ref(!!window['fas']?.inDesign);
// == 事件 ==
const emit = defineEmits(['click', 'emitSize']);

// 点击事件
const onClickHandler = params => {
  emit('click', params);
};
const onDragToChangeImg = ev => {
  // console.log('ev ', ev.clientX, ev)
  // console.dir('dragBar.value == ' + dragBar.value.offsetTop)
  // console.dir(dragBar.value)
  // ev = ev;
  var disX = ev.clientX - dragBar.value.offsetLeft;
  var disY = ev.clientY - dragBar.value.offsetTop;
  document.onmousemove = function (ev) {
    // ev = ev;
    const oWidth = ev.clientX - disX + dragBar.value.offsetWidth + 'px'
    oWrap.value.style.width = oWidth;
    // 1.通过 mappingProps.size 修改 size, 并实时展示效果
    // 2.将 size 传出去, 外部接收并真正修改 props.size 的值
    mappingProps.size = oWidth;
    emit('emitSize', oWidth)
  };
  document.onmouseup = function () {
    document.onmousemove = document.onmouseup = null;
  };
};
</script>

<style lang="scss">
.t-avatar-wrap {
  position: relative;
  display: inline-block;
  .resize-bar {
    z-index: 2;
    position: absolute;
    cursor: nwse-resize;
    right: 13%;
    bottom: 13%;
    width: 15px;
    height: 15px;
    // background-color: pink;
  }
  .square {
    right: 0px;
    bottom: 0px;
  }
}
.t-avatar {
  position: relative;

  .q-avatar-decorator,
  .t-avatar-decorator,
  .q-avatar-hover,
  .t-avatar-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .q-avatar-decorator-container,
  .t-avatar-decorator-container,
  .q-avatar-hover-container,
  .t-avatar-hover-container {
    width: 100%;
    height: 100%;
  }

  .q-avatar-hover-container,
  .t-avatar-hover-container {
    display: none;
  }
  &:hover {
    .q-avatar-hover-container,
    .t-avatar-hover-container {
      display: block;
    }
  }
}
</style>
